<template>

    <div class="post">
<div>
    <form action="/">
        <van-search
                v-model="value"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @cancel="onCancel"
        />
    </form>
</div>

       <div style="background: white;position: static">

           <button v-on:click="toPostEditor()" class="submit" >发布</button>
           <!--"firebrick"    v-on:click="toPostEditor()"-->
       </div>

        <div>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                >
                    <template>

                        <div class="hot-post-item" v-for="hotpost in hotposts" :key="hotpost">

                            <div class="hot-post-item-head">
                                <!--头像-->
                                <img :src="hotpost.userHeader" class="hot-post-item-header">
                                <div class="content" v-on:click="toPostDetails(hotpost.id)">
                                    <p class="post-author">{{hotpost.userName}}</p>
                                    <p class="post-title">{{hotpost.title}}</p>
                                </div>
                            </div>

                            <div class="hot-post-text" v-on:click="toPostDetails(hotpost.id)">
                                <div class="van-multi-ellipsis--l3">
                                    <p class="hot-post-text-text">{{hotpost.text}}</p>
                                </div>
                            </div>

                            <div>
                                <van-row justify="center">
                                    <van-col span="12">
                                        <div class="post-dianzan">
                                            <van-checkbox v-model="hotpost.dianzan" v-on:click="Ondianzan(hotpost)">
                                                <div>{{hotpost.dianzanNumber}}</div>
                                                <template #icon="props">
                                                    <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon"/>
                                                </template>
                                            </van-checkbox>
                                        </div>
                                    </van-col>
                                    <van-col span="12" v-on:click="toPostDetails()">
                                    <div class="post-pinglun">
                                        <img class="img-icon" src="@/views/post/static/post_pinglun.png"/>
                                    </div>
                                    </van-col>
                                </van-row>
                            </div>

                        </div>
                    </template>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
    import {Checkbox, CheckboxGroup} from 'vant';
    import { Search } from 'vant';
    import {NavBar} from 'vant';
    import {List} from 'vant';
    import Vue from 'vue';
    import {Col, Row} from 'vant';
    import {ref} from 'vue';
    import {Toast} from 'vant';
    import {Lazyload} from 'vant'
    import {ApiService} from "../../axios/apiService";
    import {PullRefresh} from 'vant';

    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    Vue.use(Search);
    Vue.use(Col);
    Vue.use(Row);
    Vue.use(List);
    Vue.use(NavBar);
    Vue.use(Lazyload);
    Vue.use(PullRefresh);

    export const home = new ApiService('/home')
    const postMessage = new ApiService("/pethome/post");
    const dianzan = new  ApiService("/post/dianzan")
    export default {
        components: {},
        setup() {
            const value = ref('');
            const onSearch = (val) => Toast(val);
            const onCancel = () => Toast('取消');
            return {
                onSearch,
                onCancel,
                toPostDetails:"toPostDetails",
                value,
            };
        },
        props: {},
        data() {
            return {
                value: '',
                loading: false,
                finished: false,
                refreshing: false,
                userheader: "https://img01.yzcdn.cn/vant/cat.jpeg",
                hotposts: [
                    /*{
                        header: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F311%2F042411063F5%2F110424063F5-9.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621263216&t=5f0fdd8bf382bef7cab6b923a948b2d2",
                        author: "用户12345",
                        title: "我不仅可以当你的宠物，也可以当你的疗愈者",
                        text: "2012年12月4日，美国康乃狄克州的Newtown城发生了一起校园枪击案，枪击造成20个小孩与6名校职工死亡。这起案件給当时在场的其他孩子们造成了巨大的心理创伤，许多小孩因恐惧而短暂地丧失了交流能力。随后，一支专业的心理服务团队进入校园，他们带了9只经过专业训练的拉布拉多犬，帮助孩子们度过精神危机。心理服务人员让孩子们围坐在地板上，拥抱或抚摸着身边的拉布拉多犬，慢慢地讨论案发时他们的恐惧，以及失去小伙伴们的悲伤。一个事发后一直不肯和母亲对话的小女孩，在与狗狗们相处了一段时间后，也愿意和妈妈分享当时发生的事情。",
                        isChecked: "checked",/!*点赞*!/
                    }*/
                ],
                activeIcon: require("@/views/post/static/post_dianzan_inactiveIcon.png"),
                inactiveIcon: require("@/views/post/static/post_dianzan_activeIcon.png"),

            };
        },
        mounted() {
            this.getPostMessage()
            this.getIteams()
            console.log('初始化数据')
        },
        methods: {
            onSearch(val) {//搜索
                console.log(val);
                const searchKeyValue = new ApiService("/post/searchKeyValue")
                searchKeyValue.getParams({
                    keyValue: val
                }).then((
                    res=>{
                        console.log(res.data)
                        if(res.data.length ==  0){
                            Toast("没有您想要的搜索结果哦")
                        }else{
                            this.hotposts =  res.data
                        }
                    }
                ))
            },
            onCancel() {
                /*Toast('取消');*/
                location.reload();
            },

            Ondianzan(hotpost){
                    if(hotpost.dianzan == false){
                        hotpost.dianzanNumber--;
                        //hotpost.dianzan = true;
                        console.log("hotpost.data.authorId"+hotpost.authorId)
                        dianzan.update(hotpost);
                    }else {
                        //hotpost.dianzan = false;
                        hotpost.dianzanNumber++;
                        dianzan.update(hotpost);
                    }
            },
            getPostMessage(){
              postMessage.getViewList().then(res=>{
                  this.hotposts = res.data;
              })
            },
            toPostEditor(){
                const test = new ApiService("")
                if(test.getCookie("userid")){
                    this.$router.push({name: "postEditor"})
                }else{
                    Toast("您还没有登录！")
                }

            },
            onLoad() {
                setTimeout(() => {
                    if (this.refreshing) {
                        this.list = [];
                        this.refreshing = false;
                    }

                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }
                    this.loading = false;

                    if (this.list.length >= 40) {
                        this.finished = true;
                    }
                }, 1000);
            },
            onRefresh() {
                // 清空列表数据
                this.finished = false;
                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
            },
            toPostDetails(postId) {
                this.$router.push({name: "post-details",params:{postId:postId}})
            },
        },

        getIteams() {
            home.list('iteams').then(res => {
                console.log(res);
            })
        },
        moreCategory() {
            this.$router.push("category")
        },
        onClickLeft() {
            Toast('返回');
        },
        onClickRight() {
            Toast('按钮');
        },
    };
</script>
<style>
    .hot-post-item-header{
        width: 2.5rem;
        height: 2.5rem;
        border-radius:2.5rem;
    }
    .submit{
        background-color: firebrick;
        right: 14px;
        margin-left: 73%;
        border: none;
        color: white;
        padding: 5px 21px;
        position: unset;
    }
    .post-pinglun{
        margin-left: 54px;

    }
    .post-dianzan{
        margin-left: 62px;
    }
    .img-icon {
        height: 20px;
    }

    .post {
        margin: auto;
    }

    .post-top {
        height: 100px;
    }

    .hot-post-item-botton-img-icon {
        height: 20px;
    }

    .hot-post-item-head {
        display: flex; /*左右分布*/
    }

    .hot-post-text-text {
        margin: auto;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 3px;
    }

    .hot-post-text {
        margin: auto;
    }

    .post-title {
        color: black;
        font-size: 16px;
        margin: auto;
        font-weight: 700;
    }

    .hot-post-item {
        margin-bottom: 10px;
        display: block;
        table-layout: auto;
        background: white;
    }

    .post-author {
        margin-left: 3px;
        margin-top: auto;
        color: saddlebrown;
        font-size: 20px;
        margin-bottom: auto;
    }

    .my-swipe .van-swipe-item {
        color: #ffffff;
        font-size: 20px;
        width: 100vm;
        height: 20vh;
        vertical-align: middle;
        text-align: center;
        background-color: #39a9ed;
    }

    .top-background {
        width: auto;
        height: 182px;
    }
</style>